<template>
  <div class="track_the_playback">
    <div class="aroundtop">
      <!-- 设置分组 -->
      <i class="el-icon-speed" title="分组">分组</i>
      <el-select
        v-model="CLIENT_GROUP_NAME"
        placeholder="请选择分组"
        @change="groupchange"
      >
        <el-option
          v-for="(item, index) in groupingList"
          :value="item.CLIENT_GROUP_NO"
          :label="item.CLIENT_GROUP_NAME"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 设置道路 -->
      <i class="el-icon-speed" title="车辆名称">车辆名称</i>
      <el-select
        v-model="Rname"
        placeholder="请选择车辆"
        @change="$forceUpdate()"
        ref="workcarname"
      >
        <el-option
          v-for="(item, index) in workcarList"
          :value="`${item.LICENSE_PLATE},${item.VID}`"
          :label="item.LICENSE_PLATE"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 设置时间 -->
      <i class="el-icon-speed" title="时间">时间</i>
      <el-date-picker
        v-model="selectDay"
        type="date"
        placeholder="选择日"
        ref="historytime"
        @change="dataSearch"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      ></el-date-picker>

      <i class="el-icon-speed" title="时段">时段</i>
      <el-select
        v-model="timesdstr"
        placeholder="请选择时段"
        @change="$forceUpdate()"
        ref="timesd"
      >
        <el-option
          v-for="(item, index) in timesdlist"
          :value="item.timesd"
          :label="item.timesd"
          :key="index"
        ></el-option>
      </el-select>

      <!-- 车辆播放 -->
      <span class="buttonI" title="车辆播放" @click="start">车辆播放</span>
      <!-- 轨迹点数据 -->
      <span class="buttonI" title="轨迹点数据" @click="openDataList"
        >轨迹点数据</span
      >
      <!-- 图片导出 -->
      <!-- <span class="buttonI" title="图片导出" @click="savepic">图片导出</span> -->
      <!-- 原始轨迹 -->
      <span class="buttonI" title="原始轨迹" @click="startYS">原始轨迹</span>
      <!-- 原始作业轨迹 -->
      <span class="buttonI" title="原始作业轨迹" @click="startBCL"
        >原始作业轨迹</span
      >
      <!-- 清除轨迹 -->
      <span class="buttonI" title="清除轨迹" @click="clear">清除轨迹</span>
      <div>
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showworktimechecked"
            active-color="#13ce66"
          ></el-switch>
          <i
            class="el-icon-speed"
            title="是否显示时间点"
            style="margin-left: 10px"
            >是否显示时间点</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showworkcountchecked"
            active-color="#13ce66"
          ></el-switch>
          <i
            class="el-icon-speed"
            title="是否显示作业次数"
            style="margin-left: 10px"
            >是否显示作业次数</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showworktarck"
            active-color="#13ce66"
          ></el-switch>
          <i
            class="el-icon-speed"
            title="是否显示原始轨迹"
            style="margin-left: 10px"
            >是否显示原始轨迹</i
          ></span
        >
        <!-- 修改后作业轨迹 -->
        <span class="buttonI" title="修改后作业轨迹" @click="startNewBCL"
          >修改后作业轨迹</span
        >
      </div>
      <!-- <div class="aroundtopdown"> -->
      <div class="aroundtopcontent">
        <!-- 轨迹偏移设置 -->
        <i class="el-icon-speed" title="轨迹偏移设置">轨迹偏移设置：</i>
        <el-checkbox class="el-checkbox-show" v-model="linevalue.jscheck"
          >机扫车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.jsvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.gycheck"
          >高压清洗车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.gyvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.xlcheck"
          >洗路车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.xlvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.xccheck"
          >吸尘车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.xcvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.sscheck"
          >洒水车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.ssvalue"
        />
        <el-checkbox class="el-checkbox-show" v-model="linevalue.xjcheck"
          >小型机扫车</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.xjvalue"
        />
        <i class="el-icon-speed" title="线粗">线粗</i>
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.cxvalue"
        />
      </div>
    </div>
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
    </div>
    <!-- 数据列表 -->
    <el-dialog
      title="点位数据列表"
      :visible.sync="dataListDialog"
      width="55%"
      class="dialogchild"
    >
      <el-form style="height: 40px; padding-top: 15px">
        <i class="el-icon-speed" style="margin-left: 20px; margin-right: 10px"
          >道路名称</i
        >
        <el-select
          v-model="LICENSE_PLATE"
          placeholder="请选择道路名称"
          @change="carchange"
        >
          <el-option
            v-for="(item, index) in roadList"
            :value="item.RoadName"
            :label="item.RoadName"
            :key="index"
          ></el-option>
        </el-select>
      </el-form>
      <el-table
        :data="onecardataList"
        style="width: 150%"
        fit
        max-height="550"
        highlight-current-row
      >
        <!-- {"Lng":"117.449241907762","Lat":"38.8629691205361","Speed":"50","Direction":"西","GpsTime":"2020/12/21 9:16:47"}, -->
        <el-table-column
          prop="RoadName"
          label="道路名称"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="CAR_TYPE"
          label="车辆类型"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ORIENTATION_TIME"
          label="定位时间"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="NewLng"
          label="经度"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="NewLat"
          label="纬度"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SPEED"
          label="速度"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="StatusName"
          label="速度是否符合"
          width="140"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 图例 -->
    <div class="legend" v-if="showLegend">
      <h3>
        图例
        <i class="iconfont icon-shanchu" @click="showLegend = false"></i>
      </h3>

      <p>
        <span>
          <img :src="legend.routeJISAO" alt />
        </span>
        <span style="font-size: 12px">机扫车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXIAOXING" alt />
        </span>
        <span style="font-size: 12px">小型机扫车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXICHEN" alt />
        </span>
        <span style="font-size: 12px">吸尘车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeSASHUI" alt />
        </span>
        <span style="font-size: 12px">洒水车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeGAOYA" alt />
        </span>
        <span style="font-size: 12px">高压清洗车</span>
      </p>
      <p>
        <span>
          <img :src="legend.routeXILU" alt />
        </span>
        <span style="font-size: 12px">洗路车</span>
      </p>
      <!-- <p>
        <span><img alt /></span><span style="color: #fff">转运站</span>
      </p>
      <p>
        <span class="road1">
        </span>
        <span style="font-size: 12px">主干路</span>
      </p>
      <p>
        <span class="road2">
        </span>
        <span style="font-size: 12px">次干路</span>
      </p>
      <p>
        <span class="road3">
        </span>
        <span style="font-size: 12px">支路</span>
      </p> -->
    </div>
    <!-- 右下角 图例展开按钮-->
    <div
      class="mini_legend right"
      v-if="!showLegend"
      @click="showLegend = !showLegend"
    >
      图例
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/common/js/date.js";
import ImageStart from "@/assets/img/playback/begin3.png";
import ImageEnd from "@/assets/img/playback/end3.png";

import MapStr from "@/main.js";
import DirectionImg from "@/assets/img/playback/direction.png";
import imgrouteJISAO from "@/assets/img/MapMarker/vehicleRoute/jsRoute.png";
import imgrouteXIAOXING from "@/assets/img/MapMarker/vehicleRoute/xxRoute.png";
import imgrouteXICHEN from "@/assets/img/MapMarker/vehicleRoute/xcRoute.png";
import imgRouteSASHUI from "@/assets/img/MapMarker/vehicleRoute/ssRoute.png";
import imgrouteGAOYA from "@/assets/img/MapMarker/vehicleRoute/gyRoute.png";
import imgrouteXILU from "@/assets/img/MapMarker/vehicleRoute/xlRoute.png";
import html2canvas from "html2canvas";
export default {
  data () {
    return {
      LICENSE_PLATE: "",
      setSlider: {
        max: 100,
        value: 0,
        step: 1,
      },
      timesdstr: "全天",
      timesdlist: [{ timesd: "全天" }, { timesd: "上午" }, { timesd: "下午" }],
      map: null,
      hshmap: new Map(),
      mapZoom: 20,
      Rname: "",
      markerWithSlider: null,
      dataListDialog: false,
      dataList: [],
      dataListc: [],
      dataListTrack: [],
      dataCurrentIndex: 0,
      VID: 0,
      setTime: {},
      selectDay: "",
      CLIENT_GROUP_NAME: "",
      groupingList: [],
      roadList: [],
      workcountList: [],
      onecardataList: [],
      workcarList: [],
      showworktimechecked: false,
      showworkcountchecked: false,
      showworktarck: false,
      showLegend: true,
      legend: {
        routeJISAO: imgrouteJISAO,
        routeXIAOXING: imgrouteXIAOXING,
        routeXICHEN: imgrouteXICHEN,
        routeSASHUI: imgRouteSASHUI,
        routeGAOYA: imgrouteGAOYA,
        routeXILU: imgrouteXILU,
      },
      linevalue: {
        jsvalue: 4,
        gyvalue: 8,
        xlvalue: 12,
        xcvalue: 16,
        ssvalue: 20,
        xjvalue: 24,
        jscheck: true,
        gycheck: true,
        xlcheck: true,
        xccheck: true,
        sscheck: true,
        xjcheck: true,
        cxvalue: 5,
      },
      EARTH_RADIUS: 6378137,
    };
  },
  created () {
    this.VID = this.$route.query.VID;
    var now = new Date();
    now.setDate(now.getDate() - 1);
    var monthn = now.getMonth() + 1;
    var yearn = now.getFullYear();
    var dayn = now.getDate();
    this.selectDay = yearn + "-" + monthn + "-" + dayn;
    // 隐藏图例
    // eventBus.$on("toHideLegend", () => {
    //   this.showLegend = false;
    // });
  },
  methods: {
    dataSearch () {
      this.getListByDay();
      this.getRoadList(this.CLIENT_GROUP_NAME);
    },
    groupchange (val) {
      this.getRoadList(val);
    },
    carchange (val) {
      this.onecardataList = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i][0].RoadName == val) {
          this.onecardataList = this.onecardataList.concat(this.dataList[i]);
        }
      }
    },
    async getListByDay (data) { },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('LNG'), localStorage.getItem('LAT')), this.mapZoom)
      // 设置地图显示的城市 此项是必须设置的
      // this.map.setCurrentCity(MapStr.MapName); 
      // 开启滚轮缩放
      this.map.enableScrollWheelZoom(true);
      var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), {
        anchor: new BMap.Size(20, 20),
      });
      this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), {
        icon: myIcon,
      });
      this.markerWithSlider.disableMassClear();
      this.map.addOverlay(this.markerWithSlider);
    },
    // 选定时间,获取车辆数据列表
    async getcarDataList () {
      if (
        this.$refs.workcarname.value == null ||
        this.$refs.workcarname.value == "undefined"
      ) {
        this.$message.error("未选择车辆");
        return;
      }
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      let [value, label] = this.$refs.workcarname.value.split(",");
      const params = {
        workdate: str,
        carname: value,
        client_no: this.CLIENT_GROUP_NAME,
      };
      const { data } = await this.$Http.get(
        "Vehicle/GetRoadVehicleInfoVehicle",
        { params }
      );
      if (data.length != 0) {
        this.roadList = data;
      } else {
        this.$message.error("未获取到道路");
      }
    },
    // 选定时间,获取道路轨迹数据列表
    async getDataList () {
      if (
        this.$refs.workcarname.value == null ||
        this.$refs.workcarname.value == "undefined"
      ) {
        this.$message.error("未选择车辆");
        return;
      }
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      let [value, label] = this.$refs.workcarname.value.split(",");
      const params = {
        workdate: str,
        carname: value,
        timestatus: this.$refs.timesd.value,
        client_no: this.CLIENT_GROUP_NAME,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get(
        "Vehicle/GetRoadTrackGroupvehicleTest",
        { params }
      );
      // const { data } = await this.$Http.get('Vehicle/GetRoadTrackGroupvehicle', { params })
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.dataListc = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        this.drawPicture();
      } else {
        this.$message.error("未获取到轨迹");
      }
    },

    async getDataListBCL () {
      if (
        this.$refs.workcarname.value == null ||
        this.$refs.workcarname.value == "undefined"
      ) {
        this.$message.error("未选择车辆");
        return;
      }
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      let [value, label] = this.$refs.workcarname.value.split(",");
      const params = {
        workdate: str,
        carname: value,
        timestatus: this.$refs.timesd.value,
        client_no: this.CLIENT_GROUP_NAME,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get(
        "Vehicle/GetRoadTrackGroupvehicleTestBCL",
        { params }
      );
      // const { data } = await this.$Http.get('Vehicle/GetRoadTrackGroupvehicle', { params })
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.dataListc = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        this.drawPictureNew();
      } else {
        this.$message.error("未获取到轨迹");
      }
    },

    async getDataListNewBCL () {
      if (
        this.$refs.workcarname.value == null ||
        this.$refs.workcarname.value == "undefined"
      ) {
        this.$message.error("未选择车辆");
        return;
      }
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      let [value, label] = this.$refs.workcarname.value.split(",");
      const params = {
        workdate: str,
        carname: value,
        timestatus: this.$refs.timesd.value,
        client_no: this.CLIENT_GROUP_NAME,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get(
        "Vehicle/GetRoadTrackGroupvehicleTestNewBCL",
        { params }
      );
      // const { data } = await this.$Http.get('Vehicle/GetRoadTrackGroupvehicle', { params })
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.dataListc = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        this.drawPictureNew();
      } else {
        this.$message.error("未获取到轨迹");
      }
    },

    async getTrackDataList () {
      // 16232
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      let odata = new Date(date.getTime() - 24 * 60 * 60 * 1000);
      let ostr = formatDate(odata, "yyyy-MM-dd");
      let [value, label] = this.$refs.workcarname.value.split(",");
      const params = {
        VID: label,
        StartDate: ostr + " 22:00:00",
        EndDate: str + " 22:00:00",
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get("Vehicle/GetVehicleHistoryInfo", {
        params,
      });
      loading.close();
      if (data.length != 0) {
        this.dataListTrack = data;
        this.drawPictureTrack();
      } else {
        this.$message.error("未获取到轨迹");
      }
    },
    // 获取两个点的角度
    getAngle (lng1, lat1, lng2, lat2) {
      const a = ((90 - lat2) * Math.PI) / 180;
      const b = ((90 - lat1) * Math.PI) / 180;
      const AOC_BOC = ((lng2 - lng1) * Math.PI) / 180;
      const cosc =
        Math.cos(a) * Math.cos(b) +
        Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
      const sinc = Math.sqrt(1 - cosc * cosc);
      const sinA = (Math.sin(a) * Math.sin(AOC_BOC)) / sinc;
      const A = (Math.asin(sinA) * 180) / Math.PI;
      let res = 0;
      if (lng2 > lng1 && lat2 > lat1) res = A;
      else if (lng2 > lng1 && lat2 < lat1) res = 180 - A;
      else if (lng2 < lng1 && lat2 < lat1) res = 180 - A;
      else if (lng2 < lng1 && lat2 > lat1) res = 360 + A;
      else if (lng2 > lng1 && lat2 === lat1) res = 90;
      else if (lng2 < lng1 && lat2 === lat1) res = 270;
      else if (lng2 === lng1 && lat2 > lat1) res = 0;
      else if (lng2 === lng1 && lat2 < lat1) res = 180;
      return res;
    },
    // 打开数据列表
    openDataList () {
      this.getcarDataList();
      this.dataListDialog = true;
      this.getDataList();
    },
    //截屏保存成图片
    savepic () {
      let canvas = document.querySelector(".track_the_playback");
      let that = this;
      html2canvas(canvas, {
        useCORS: true,
        tainttest: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight,
      }).then(function (canvas) {
        let type = "png";
        let imgData = canvas.toDataURL(type);
        // 照片格式处理
        let _fixType = function (type) {
          type = type.toLowerCase().replace(/jpg/i, "jpeg");
          let r = type.match(/png|jpeg|bmp|gif/)[0];
          return "image/" + r;
        };
        imgData = imgData.replace(_fixType(type), "image/octet-stream");
        let filename = "道路轨迹图片" + "." + type;
        that.saveFile(imgData, filename);
      });
    },
    saveFile (data, filename) {
      let save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;

      let event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },
    //画出整个轨迹
    drawPicture () {
      // this.map.clearOverlays();
      this.hshmap.clear();
      var offSet = 0.0;
      var offRight = true;

      for (var i = 0; i < this.dataList.length; i++) {
        if (
          (this.dataList[i][0].CAR_TYPE == "机扫车" &&
            this.linevalue.jscheck) ||
          (this.dataList[i][0].CAR_TYPE == "高压清洗车" &&
            this.linevalue.gycheck) ||
          (this.dataList[i][0].CAR_TYPE == "洗路车" &&
            this.linevalue.xlcheck) ||
          (this.dataList[i][0].CAR_TYPE == "小型机扫车" &&
            this.linevalue.xjcheck) ||
          (this.dataList[i][0].CAR_TYPE == "吸尘车" &&
            this.linevalue.xccheck) ||
          (this.dataList[i][0].CAR_TYPE == "洒水车" && this.linevalue.sscheck)
        ) {
          switch (this.dataList[i][0].CAR_TYPE) {
            case "机扫车":
              offSet = this.linevalue.jsvalue * 0.00001;
              offRight = true;
              break;
            case "高压清洗车":
              offSet = this.linevalue.gyvalue * 0.00001;
              offRight = true;
              break;
            case "洗路车":
              offSet = this.linevalue.xlvalue * 0.00001;
              offRight = true;
              break;
            case "小型机扫车":
              offSet = this.linevalue.xjvalue * 0.00001;
              offRight = false;
              break;
            case "吸尘车":
              offSet = this.linevalue.xcvalue * 0.00001;
              offRight = false;
              break;
            case "洒水车":
              offSet = this.linevalue.ssvalue * 0.00001;
              offRight = false;
              break;
          }
          var temp = [];
          for (var Hg = 0; Hg < this.dataList[i].length; Hg++) {
            var changMax = this.dataList[i][0].changeMax;
            //第一个点
            if (Hg == 0) {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg + 1],
                  offSet,
                  offRight,
                  changMax
                )
              );
            }
            //最后一个点
            else if (Hg == this.dataList[i].length - 1) {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg - 1],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg],
                  offSet,
                  offRight,
                  changMax
                )
              );
            } else {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg - 1],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg + 1],
                  offSet,
                  offRight,
                  changMax
                )
              );
            }
          }
          this.dataList[i] = temp;
        }
      }

      var dataJS = [];
      var dataGY = [];
      var dataXL = [];
      var dataXJS = [];
      var dataXC = [];
      var dataSS = [];
      var boundPoints = [];
      for (var i = 0; i < this.dataList.length; i++) {
        // if (
        //   (this.dataList[i][0].CAR_TYPE == "机扫车" &&
        //     this.linevalue.jscheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "高压清洗车" &&
        //     this.linevalue.gycheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "洗路车" &&
        //     this.linevalue.xlcheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "小型机扫车" &&
        //     this.linevalue.xjcheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "吸尘车" &&
        //     this.linevalue.xccheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "洒水车" && this.linevalue.sscheck)
        // ) {
        var pointArr = [];
        for (const item1 of this.dataList[i]) {
          // pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat));
          pointArr.push([item1.NewLng, item1.NewLat])
          boundPoints.push(new BMap.Point(item1.NewLng, item1.NewLat));
        }
        // let color = "";
        if (this.dataList[i][0].CAR_TYPE == "机扫车") {
          // color = "#16F111";
          dataJS.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "高压清洗车") {
          // color = "#FF00FF";
          dataGY.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "洗路车") {
          // color = "#F70303";
          dataXL.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "小型机扫车") {
          // color = "#000000";
          dataXJS.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "吸尘车") {
          // color = "#0302FD";
          dataXC.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "洒水车") {
          // color = "#753631";
          dataSS.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        }
        // var polyline = new BMap.Polyline(pointArr, {
        //   strokeColor: color,
        //   strokeWeight: this.linevalue.cxvalue,
        //   strokeOpacity: 2,
        // });
        // this.map.addOverlay(polyline);
        if (
          !this.hshmap.has(this.dataList[i][0].RoadName) &&
          (this.showworkcountchecked || this.showworktimechecked)
        ) {
          this.hshmap.set(this.dataList[i][0].RoadName, 1);
          var point = new BMap.Point(
            this.dataList[i][0].NewLng,
            this.dataList[i][0].NewLat
          );
          var markerImage = new BMap.Icon(
            DirectionImg,
            new BMap.Size(50, 50)
          );
          var marker = new BMap.Marker(point, { icon: markerImage });
          let concent = "";
          if (this.showworkcountchecked) {
            for (var cc = 0; cc < this.workcountList.length; cc++) {
              if (
                this.workcountList[cc].RoadName ==
                this.dataList[i][0].RoadName
              ) {
                if (this.workcountList[cc].cs.length > 3)
                  concent =
                    // "次数：" + this.workcountList[cc].cs.substring(0, 4);
                    `<div>次数：${this.workcountList[cc].cs.substring(0, 4)}</div>`
              }
            }
          }
          if (this.showworktimechecked) {
            concent =
              // "时间：" + this.dataList[i][0].ORIENTATION_TIME + ";" + concent;
              `<div>时间：${this.dataList[i][0].ORIENTATION_TIME}</div>` + concent
          }
          var label = new BMap.Label(concent, {
            offset: new BMap.Size(-25, 30),
          });
          marker.setLabel(label);
          this.map.addOverlay(marker);
        }
        // }
      }
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataJS), {
        zIndex: 2,
        strokeStyle: "#16F111",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataXL), {
        zIndex: 2,
        strokeStyle: "#F70303",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataGY), {
        zIndex: 2,
        strokeStyle: "#FF00FF",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataXJS), {
        zIndex: 2,
        strokeStyle: "#000000",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataXC), {
        zIndex: 2,
        strokeStyle: "#0302FD",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataSS), {
        zIndex: 2,
        strokeStyle: "#753631",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      this.map.setViewport(boundPoints);
      // this.map.centerAndZoom(new BMap.Point(this.dataList[0][0].NewLng, this.dataList[0][0].NewLat), this.mapZoom)
      // this.countMaxMin();
      if (this.showworktarck) this.getTrackDataList();
    },

    drawPictureNew () {
      // this.map.clearOverlays();
      this.hshmap.clear();

      var dataJS = [];
      var dataGY = [];
      var dataXL = [];
      var dataXJS = [];
      var dataXC = [];
      var dataSS = [];
      var boundPoints = [];
      for (var i = 0; i < this.dataList.length; i++) {
        // if (
        //   (this.dataList[i][0].CAR_TYPE == "机扫车" &&
        //     this.linevalue.jscheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "高压清洗车" &&
        //     this.linevalue.gycheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "洗路车" &&
        //     this.linevalue.xlcheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "小型机扫车" &&
        //     this.linevalue.xjcheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "吸尘车" &&
        //     this.linevalue.xccheck) ||
        //   (this.dataList[i][0].CAR_TYPE == "洒水车" && this.linevalue.sscheck)
        // ) {
        var pointArr = [];
        for (const item1 of this.dataList[i]) {
          // pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat));
          pointArr.push([item1.NewLng, item1.NewLat])
          boundPoints.push(new BMap.Point(item1.NewLng, item1.NewLat));
        }
        // let color = "";
        if (this.dataList[i][0].CAR_TYPE == "机扫车") {
          //   color = "#16F111";
          dataJS.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "高压清洗车") {
          //   color = "#FF00FF";
          dataGY.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "洗路车") {
          //   color = "#F70303";
          dataXL.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "小型机扫车") {
          //   color = "#000000";
          dataXJS.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "吸尘车") {
          //   color = "#0302FD";
          dataXC.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        } else if (this.dataList[i][0].CAR_TYPE == "洒水车") {
          //   color = "#753631";
          dataSS.push({
            geometry: {
              type: 'LineString',
              coordinates: pointArr
            },
          });
        }
        // var polyline = new BMap.Polyline(pointArr, {
        //   strokeColor: color,
        //   strokeWeight: this.linevalue.cxvalue,
        //   strokeOpacity: 2,
        // });
        // this.map.addOverlay(polyline);
        // }
      }
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataJS), {
        zIndex: 2,
        strokeStyle: "#16F111",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataXL), {
        zIndex: 2,
        strokeStyle: "#F70303",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataGY), {
        zIndex: 2,
        strokeStyle: "#FF00FF",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataXJS), {
        zIndex: 2,
        strokeStyle: "#000000",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataXC), {
        zIndex: 2,
        strokeStyle: "#0302FD",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      new mapv.baiduMapLayer(this.map, new mapv.DataSet(dataSS), {
        zIndex: 2,
        strokeStyle: "#753631",
        lineWidth: this.linevalue.cxvalue,
        lineJoin: 'round',
        draw: 'simple'
      });
      this.map.setViewport(boundPoints);
      // this.map.centerAndZoom(new BMap.Point(this.dataList[0][0].NewLng, this.dataList[0][0].NewLat), this.mapZoom)
      // this.countMaxMin();
      if (this.showworktarck) this.getTrackDataList();
    },

    // countMaxMin() {
    //   var pointArr = [];
    //   for (var i = 0; i < this.dataListc.length; i++) {
    //     for (var j = 0; j < this.dataListc[i].length; j++) {
    //       pointArr.push(
    //         new BMap.Point(
    //           this.dataListc[i][j].NewLng,
    //           this.dataListc[i][j].NewLat
    //         )
    //       );
    //     }
    //   }
    //   var polyline = new BMap.Polyline(pointArr, {
    //     strokeColor: "#16F111",
    //     strokeWeight: this.linevalue.cxvalue,
    //     strokeOpacity: 2,
    //   });
    //   // this.map.centerAndZoom(polyline.getBounds().getCenter(), 15);
    //   this.map.setViewport(pointArr);
    // },
    drawPictureTrack () {
      var pointArr = [];
      for (var i = 0; i < this.dataListTrack.length; i++) {
        if (i == this.dataListTrack.length - 1) {
          pointArr.push(new BMap.Point(item.LNG, item.LAT));
          if (pointArr.length > 0) {
            var polyline = new BMap.Polyline(pointArr, {
              strokeColor: "#00FFFF",
              strokeWeight: this.linevalue.cxvalue,
              strokeOpacity: 2,
            });
            this.map.addOverlay(polyline);
          }
          pointArr = [];
        } else {
          var item = this.dataListTrack[i];
          var item1 = this.dataListTrack[i + 1];
          var ll = this.GetDistance(item.LNG, item.LAT, item1.LNG, item1.LAT);
          if (ll > 800) {
            if (pointArr.length > 0) {
              var polyline = new BMap.Polyline(pointArr, {
                strokeColor: "#00FFFF",
                strokeWeight: this.linevalue.cxvalue,
                strokeOpacity: 2,
              });
              this.map.addOverlay(polyline);
            }
            pointArr = [];
          } else {
            pointArr.push(new BMap.Point(item.LNG, item.LAT));
          }
        }
      }
    },
    // 获得分组列表
    async getGroupingList () {
      var url =
        "Vehicle/GetClientInfo?client_no=" + localStorage.getItem("CLIENT_NO"); // zxdata
      let { data } = await this.$Http.get(url);
      this.groupingList = data;
      this.CLIENT_GROUP_NAME = data[0].CLIENT_GROUP_NO;
      this.getRoadList(data[0].CLIENT_GROUP_NO);
    },
    // 获得道路列表
    async getRoadList (val) {
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      var url = "Vehicle/GetCarInfo?workdate=" + str + "&client_no=" + val; // zxdata
      let { data } = await this.$Http.get(url);
      this.workcarList = data;
      this.Rname = `${data[0].LICENSE_PLATE},${data[0].VID}`; //data[0].LICENSE_PLATE
    },
    // 获得道路列表
    async getWorkcountList () {
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      var url =
        "Vehicle/GetCountInfo?workdate=" +
        str +
        "&carname=" +
        this.$refs.workcarname.value.split(",")[0]; // zxdata
      let { data } = await this.$Http.get(url);
      this.workcountList = data;
    },
    //进行轨迹点偏移
    getCorrentVehicleInfoThree (
      info1,
      info2,
      info3,
      distance,
      rightOff,
      changeMax
    ) {
      //两点之间的弧度
      var offAngel = 0;
      var info = new Object();
      var xiangxian = "";
      //两点经度差

      var offX = info3.NewLng * 1 - info1.NewLng * 1;
      //两点纬度差
      var offY = info3.NewLat * 1 - info1.NewLat * 1;
      //经度偏移
      var offLng = 0;

      //纬度偏移
      var offLat = 0;

      //偏移系数X
      var facX = 0;

      //偏移系数Y
      var facY = 0;

      if (info3.NewLng != info1.NewLng) {
        offAngel = Math.atan2(Math.abs(offX), Math.abs(offY));
      }

      //第一象限
      if (offX > 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 1;
      }
      //第二象限
      else if (offX < 0 && offY > 0) {
        xiangxian = "二象限";
        facX = -1;
        facY = -1;
      }
      //第三象限
      else if (offX < 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = -1;
      }
      //第四象限
      else if (offX > 0 && offY < 0) {
        xiangxian = "四象限";
        facX = 1;
        facY = 1;
      } else if (offX == 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 0;
      } else if (offX < 0 && offY == 0) {
        xiangxian = "二象限";

        facX = 0;
        facY = -1;
      } else if (offX == 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = 0;
      } else if (offX > 0 && offY == 0) {
        xiangxian = "四象限";
        facX = 0;
        facY = 1;
      }

      switch (changeMax) {
        case "X+":
          facY = -1;
          break;

        case "X-":
          facY = 1;
          break;

        case "X0":
          facY = -1;
          break;

        case "Y+":
          facX = 1;
          break;

        case "Y-":
          facX = -1;
          break;

        case "Y0":
          facX = 1;
          break;
      }

      facX = -1.0 * facX;
      facY = -1.0 * facY;
      //计算偏移
      offLng = distance * Math.cos(offAngel);
      offLat = distance * Math.sin(offAngel);

      info.NewLng = info2.NewLng * 1 + facX * offLng;
      info.NewLat = info2.NewLat * 1 + facY * offLat;
      info.ORIENTATION_TIME = info2.ORIENTATION_TIME;
      info.VID = info2.VID;
      info.CAR_TYPE = info2.CAR_TYPE;
      info.LICENSE_PLATE = info2.LICENSE_PLATE;
      info.RoadName = info2.RoadName;
      info.SPEED = info2.SPEED;
      info.StatusName = info2.StatusName;
      return info;
    },

    // 开始播放道路作业轨迹
    start () {
      this.dataListDialog = false;

      this.getWorkcountList();
      this.getDataList();
    },
    startBCL () {
      this.dataListDialog = false;

      this.getWorkcountList();
      this.getDataListBCL();
    },
    startNewBCL () {
      this.dataListDialog = false;

      this.getWorkcountList();
      this.getDataListNewBCL();
    },
    startYS () {
      this.dataListDialog = false;
      this.getTrackDataList();
    },
    // 清除轨迹
    clear () {
      // this.stop();
      // this.ary = [];
      // this.dataCurrentIndex = 0;
      // this.markerWithSlider.setPosition(new BMap.Point(0, 0));
      this.map.clearOverlays();
    },

    GetDistance (lng1, lat1, lng2, lat2) {
      var radLat1 = this.Rad(lat1);
      var radLng1 = this.Rad(lng1);
      var radLat2 = this.Rad(lat2);
      var radLng2 = this.Rad(lng2);
      var a = radLat1 - radLat2;
      var b = radLng1 - radLng2;
      var result =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
            Math.cos(radLat1) *
            Math.cos(radLat2) *
            Math.pow(Math.sin(b / 2), 2)
          )
        ) *
        this.EARTH_RADIUS;
      return result;
    },
    Rad (d) {
      return (d * Math.PI) / 180.0;
    },
  },
  mounted () {
    // 显示地图
    this.getGroupingList();
    this.mapShow();
  },
};
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .aroundtop {
    padding: 10px;
    background-color: #007acc;
    height: 100%;
    border-radius: 5px;
    &:first-child {
      padding-left: 10px;
      height: auto;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      .el-checkbox-show {
        background-color: #007acc;
        border-color: rgb(196, 105, 20);
      }
    }
    .aroundtopcontent {
      // margin-left: 2px;
      margin-top: 8px;
      background-color: #fff;
      border-radius: 5px;
      width: 100%;
      i {
        color: #007acc;
        font-size: 17px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
      }

      .input-number {
        margin-top: 8px;
        margin-right: 15px;
        font-size: 14px;
        width: 100%;
        text-align: center;
      }
      .el-checkbox-show {
        background-color: rgb(255, 255, 255);
        border-color: rgb(196, 105, 20);
        margin-right: 8px;
      }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
    }
    .person_legend {
      width: 550px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background-color: rgba(255, 0, 0, 0.9);
      padding: 5px 10px 0 10px;
      border-radius: 5px;
      h3 {
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #333;
        margin-bottom: 5px;
        i {
          float: right;
          cursor: pointer;
          &:before {
            color: #666;
          }
        }
      }
      p {
        // text-align: center;
        color: #333;
        float: left;
        width: 14%;
        margin-bottom: 8px;
        span {
          display: block;
          text-align: center;
          &:first-child {
            img {
              // background-size: 30px 30px;
              height: 30px;
            }
          }
        }
      }
    }
  }
}
.settingWindow {
  height: calc(~'100% - 32px');
}
/* 弹出框 */
/deep/.el-dialog {
  background: #ccd8e7;
  padding: 10px;
}
/deep/.el-dialog__title {
  color: #15428b;
  font-size: 16px;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 0px;
  background: #dfe8f6;
  border: 1px solid #99bbe8;
}
.el-icon-speed {
  margin-left: 5px;
}
.buttonI {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.legend {
  width: 550px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: #007acc;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.road1 {
  margin: 15px;
  width: 45px;
  height: 15px;
  background-color: #f8df72;
}
.road2 {
  margin: 17px;
  width: 45px;
  height: 10px;
  background-color: #f8df72;
}
.road3 {
  margin: 19px;
  width: 45px;
  height: 5px;
  background-color: #f8df72;
}
</style>
